Flexbox에서 축과 정렬 이해하기

1️⃣ Flexbox의 기본: 축(Axis)

Flexbox는 "축"을 기준으로 아이템을 배치합니다.

• 주축 (Main Axis)
  아이템이 흐르는 기본 방향입니다. flex-direction에 의해 결정됩니다.
• ** 교차축(Cross Axis)**
  주축과 수직인 방향입니다.

🔹 flex-direction에 따른 축 방향 정리

flex-direction	Main Axis (주축)	Cross Axis (교차축)
row(기본)	가로 (왼쪽 ➡️ 오른쪽)	세로 (위 ➡️ 아래)
row-reverse	가로 (오른쪽 ➡️ 왼쪽)	세로 (위 ➡️ 아래)
column	세로 (위 ➡️ 아래)	가로 (왼쪽 ➡️ 오른쪽)
column-reverse	세로 (아래 ➡️ 위)	가로 (왼쪽 ➡️ 오른쪽)

---

2️⃣ justify-content - 주축(Main Axis) 정렬

justify-content는 주축을 따라 아이템 전체의 정렬과 간격을 설정합니다.

🔹 주요 값

• flex-start: 주축 시작점에 정렬
• flex-end: 주축 끝점에 정렬
• center: 주축 중앙에 정렬
• space-between: 시작과 끝에 아이템을 붙이고, 나머지 간격을 고르게 분배
• space-around: 아이템 양쪽에 같은 간격을 둠
• space-evenly: 모든 간격을 완전히 동일하게 분배

---

3️⃣ align-items - 교차축(Cross Axis) 정렬

algin-items는 교차축을 따라 아이템들의 정렬 방법을 설정합니다.

🔹 주요 값

• stretch (기본값): 교차축을 꽉 채움
• flex-start: 교차축 시작점에 정렬
• flex-end: 교차축 끝점에 정렬
• center: 교차축 중앙에 정렬
• baseline: 아이템의 텍스트 기준선에 맞춰 정렬